<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NInput,
  NTag,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber, NForm, NFormItem, NSwitch, NPopconfirm
} from 'naive-ui'
import api from '@/api'
import CommonPage from "@/components/page/CommonPage.vue";
import QueryBarItem from "@/components/query-bar/QueryBarItem.vue";
import CrudTable from "@/components/table/CrudTable.vue";
import TheIcon from "@/components/icon/TheIcon.vue";
import default_image from "@/assets/images/mz.jpg";
import {renderIcon} from "@/utils";

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const props = defineProps(['modelValue']);

const data = reactive({
  title: "技师维度",
  columns1: [
  {
    title: 'ID',
    key: 'id',
    align: 'center',
    width: '70',
    ellipsis: { tooltip: true },
  },
    {
    title: '卡号',
    key: 'card_no',
    align: 'center',
    width: '70',
    ellipsis: { tooltip: true },
  },
  {
    title: '头像/昵称',
    key: 'avatar',
    width: '150',
    align: 'left',
    ellipsis: { tooltip: true },
    fixed: 'left',
    render(row) {

      return h(NFlex, {},
        [h(NAvatar, {
          src: row.avatar,
          fallbackSrc: default_image,
          round: true,
          size: "medium",
        }), h(NButton, {
          size: "medium",
          dashed: true,
          type: "primary",
          onClick: () => {
          // 点击事件处理逻辑
            show_info(row)
        }
        }, {
          default: () => (row.name)
        })]
      )

    },
  },
  {
    title: '来源平台',
    key: 'platform_name',
    align: 'center',
    width: 'auto',
    ellipsis: { tooltip: true },
  },

  {
    title: '会员级别',
    key: 'role_name',
    align: 'center',
    width: 'auto',
    ellipsis: { tooltip: true },
  },
  {
    title: '电话',
    key: 'phone',
    width: 'auto',
    align: 'center',
    ellipsis: { tooltip: true },
  },
  {
    title: '性别',
    key: 'sex_name',
    width: 'auto',
    align: 'center',
    ellipsis: { tooltip: true },
  },
    {
    title: '注册时间',
    key: 'created_at',
    width: '200',
    align: 'center',
    ellipsis: { tooltip: true },
  },
    {
    title: '最近登录',
    key: 'last_login',
    width: '200',
    align: 'center',
    ellipsis: { tooltip: true },
  },
       {
    title: '储值金余额',
    key: 'last_login',
    width: '200',
    align: 'center',
    ellipsis: { tooltip: true },
  },   {
    title: '积分余额',
    key: 'last_login',
    width: '200',
    align: 'center',
    ellipsis: { tooltip: true },
  },   {
    title: '优惠券余额',
    key: 'last_login',
    width: '200',
    align: 'center',
    ellipsis: { tooltip: true },
  },   {
    title: '成长积分',
    key: 'last_login',
    width: '200',
    align: 'center',
    ellipsis: { tooltip: true },
  },
]
});


onMounted(() => {

})

</script>

<template>
  <CommonPage show-footer :title="data.title">
    <template #action>
      <div>
        <NButton class="float-right" type="primary" @click="on_excel">
          <TheIcon icon="material-symbols:timeline" :size="18" class="mr-5"/>
          导出
        </NButton>
      </div>
    </template>
    <!-- 表格 -->
    <CrudTable ref="$table" v-model:query-items="queryItems" :columns="data.columns" get-data=""
               :scroll-x="1600">
      <template #queryBar>
        <QueryBarItem label="时间范围" :label-width="70">
          <NDatePicker
              v-model:value="datetimeRange"
              type="datetimerange"
              clearable
              placeholder="请选择时间范围"
              @update:value="handleDateRangeChange"
          />
        </QueryBarItem>
      </template>
    </CrudTable>

  </CommonPage>
</template>

<style scoped>

</style>